<template>
	<view class="kindlist">
		<view class="tabBar" :style="'top:' + top + 'px'">
			<view class="tab-item" :class="item.id == activeTab ? 'active' : ''" v-for="item in tabs" :key="item.id" @tap="handleTabItem(item)">
				<view class="title">{{ item.name }}</view>
				<view class="desc" v-if="item.id == 1 || item.id == 2">
					<uni-icons type="arrowup" size="12" :color="item.isDesc == '1' ? '#dd524d' : '#fff'" class="icon"></uni-icons>
					<uni-icons type="arrowdown" size="12" :color="item.isDesc == '0' ? '#dd524d' : '#fff'" class="icon"></uni-icons>
				</view>
			</view>
		</view>
		<view class="list" v-if="list.length">
			<navigator class="list-item" v-for="item in list" :key="item.id" :url="'../productDetail/productDetail?id=' + item.id">
				<image :src="item.pic" mode=""></image>
				<view class="info">
					<view class="brand">{{ item.name }}</view>
					<view class="other">
						<text class="price">￥{{ item.price || 0 }}元</text>
						<text class="categoryName">{{ item.productCategoryName }}</text>
					</view>
				</view>
			</navigator>
		</view>
		<empty v-else></empty>
	</view>
</template>

<script>
import { findProductList } from '../../../api/kind/index.js';
export default {
	data() {
		return {
			tabs: [
				{
					id: 0,
					name: '新品',
					type: '',
					isDesc: ''
				},
				{
					id: 1,
					name: '销量',
					type: 'sale',
					isDesc: ''
				},
				{
					id: 2,
					name: '价格',
					type: 'price',
					isDesc: ''
				},
				{
					id: 3,
					name: '筛选',
					type: '',
					isDesc: ''
				}
			],
			activeTab: 0,
			limit: 10,
			start: 1,
			total: 0,
			id: '',
			list: [],
			top: 0
		};
	},
	methods: {
		// 获取商品列表
		async getProductList() {
			const productListResp = await findProductList(this.start, this.limit, {
				categoryId: this.id,
				sortBy: this.tabs[this.activeTab].type,
				isDesc: this.tabs[this.activeTab].isDesc
			});
			console.log(productListResp);
			this.list.push(...productListResp.data.rows);
			this.total = productListResp.data.total;
			// 手动停止下拉刷新
			uni.stopPullDownRefresh();
		},
		// tabbar 点击事件
		handleTabItem(item) {
			this.list = [];
			this.start = 1;
			if (this.activeTab == item.id && (item.id == 1 || item.id == 2)) {
				if (item.isDesc == '0' || item.isDesc == '') {
					item.isDesc = '1';
				} else if (item.isDesc == '1') {
					item.isDesc = '0';
				}
			} else {
				this.tabs[this.activeTab].isDesc = '';
				if (item.id == 1 || item.id == 2) {
					item.isDesc = '1';
				}
			}

			this.activeTab = item.id;
			this.getProductList();
		}
	},
	onLoad(options) {
		console.log(options);
		// #ifdef H5
		this.top = 44;
		// #endif
		this.id = options.id;
		this.getProductList();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.start = 1;
		this.list = [];
		this.getProductList();
	},
	//上拉加载更多
	onReachBottom() {
		console.log('上拉加载');
		this.start++;
		if (this.total > this.list.length) {
			this.getProductList();
		}
	}
};
</script>

<style lang="scss" scoped>
.kindlist {
	.tabBar {
		display: flex;
		justify-content: space-around;
		position: fixed;
		top: 0;
		width: 100%;
		height: 62rpx;
		line-height: 62rpx;
		font-size: 30rpx;
		padding: 14rpx 0 0;
		z-index: 100;
		color: #fff;
		background-color: #354e44;
		.tab-item {
			display: flex;
			height: 100%;
			.desc {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-left: 4rpx;
				.icon {
					line-height: 18rpx;
					&.active {
						color: #dd524d !important;
					}
				}
			}
			&.active {
				color: #dd524d;
			}
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 62rpx;
		padding: 40rpx;
		&-item {
			width: 324rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			image {
				width: 100%;
				height: 238rpx;
			}
			.info {
				padding: 36rpx;
				font-size: 26rpx;
				.brand {
					padding: 20rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #3e3e3e;
					font-weight: 700;
				}
				.other {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
